<template>
       <div>
        <div class="rightTop">
            视频提取中心|视频提取记录
        </div>
        <div class="rightMiddle">
              <div class="date">
                <div class="dateText">时间段 : </div>
                <div class="datePicker">
                    <el-date-picker
                        v-model="PDate"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD" 
                        value-format="YYYY-MM-DD"
                        style="width: 14vw;"
                        @change="getDate"
                    />
                </div>
              </div>
              <div class="mobile">
                 <div class="mobileText"> 设备号：</div>
                 <div class="mobileInput"><el-input v-model="clientId" placeholder="请输入设备号" clearable /></div>
                 <div class="mobileText"> 通道号：</div>
                 <div class="mobileInput"><el-input v-model="channel" placeholder="请输入通道号" clearable /></div>
              </div>
              <div class="select">
                  <el-button type="primary" @click="getClientId">查询</el-button>
              </div>
              
        </div>
         <div class="rightBottom"> 
          <div style="background: linear-gradient(90deg,#00BAFF 0%,#8feece 100%);height:3vh;color: #fff;line-height: 3vh;margin-top: 10px;">
              总计{{total}}条
          </div>
          <el-table :data="tableData"  border highlight-current-row >
                    <el-table-column prop="No" label="序号" width="100" align="center"/>
                    <el-table-column prop="mobileNo" label="设备号" width="180" align="center"/>
                    <el-table-column prop="channelno" label="通道号" width="100" align="center"/>
                    <el-table-column prop="starttime" label="开始时间" width="240" align="center"/>
                    <el-table-column prop="endtime" label="结束时间" width="240" align="center"/>
                    <el-table-column prop="createtime" label="提取时间" width="240" align="center"/>
                    <el-table-column prop="issuccess" label="提取结果" width="150" align="center"/>
                    <el-table-column prop="name" label="操作" width="232" align="center">
                      <template #default="{row}">
                        <el-button link type="primary" size="small" @click="delete" style="font-size:18px" disabled>删除</el-button>
                        <el-button prop="downurl" link type="primary" size="small" @click="startDownload(row)" style="font-size:18px">下载</el-button>
                      </template>
                   </el-table-column>
          </el-table>
          <div class="pagination">
                      <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        layout="sizes, prev, pager, next"
                        :page-sizes="[8, 10, 15,17]"
                        :total="total"
                        :background="isBackground"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        next-text="下一页" prev-text="上一页"
                      />
          </div>
       </div>
      </div>
</template>

<script>
import api from "@/api/api";
import  ElNotification  from 'element-plus';
export default {
  components: {ElNotification},
  name: 'HelloWorld',
  props: {},
  data: function () {
      return {
        PDate:[],
        //设备号
        clientId:"",
        //通道号
        channel:"",
        //表格数据
        tableData:[],
        //每页显示条数
        pageSize: 15,
        //当前页数
        currentPage:1,
        total: 0,
        isBackground:true
     }
    },
      mounted() {
         
          this.getUpFile();
      },
      methods: {
  
      //点击查询
      getClientId(){
        this.getUpFile();
      },
      //时间改变
      getDate(val) {
           this.PDate=val;
      },
      getUpFile(){
                api.getUpFile(this.clientId,this.channel,this.PDate[0],this.PDate[1],this.currentPage,this.pageSize)
                .then(res=>{
                  if(res.code==0){
                    this.total=res.data.total;
                    this.getTable(res.data.records);
                  }
                })
      },
   

      formattedDate(dateStr) {
      const year = dateStr.substring(0, 4);
      const month = dateStr.substring(4, 6);
      const day = dateStr.substring(6, 8);
      const hours = dateStr.substring(8, 10);
      const minutes = dateStr.substring(10, 12);
      const seconds = dateStr.substring(12, 14);
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    
      getTable(val){ 
        this.tableData = val.map((item,index) => {
          switch (item.issuccess) {
            case 0:
            item.issuccess = "提取成功";
              break;
            default:
             item.issuccess = "提取失败";
          }
    
              return {
                No: this.pageSize*(this.currentPage-1)+index + 1,
                   ...item,
                };
  
      });
     
  
      },
      startDownload(row) { 
       var url =row.downurl;
        // 创建一个链接元素
        const link = document.createElement('a');
        link.href = url; // 替换为要下载的文件路径
        link.download = url; // 替换为要下载的文件名
        link.style.display = 'none';
        document.body.appendChild(link);
        // 模拟用户点击链接
        link.click();
        // 移除链接元素
        document.body.removeChild(link);
      },
      handleSizeChange(val){
         this.pageSize=val;
         this.getUpFile();
      },
      handleCurrentChange(val){
        this.currentPage=val;
        this.getUpFile();
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


.rightTop{
  border-bottom: 1px solid #fff ;
  height: 4vh;
  width: 100%;
  line-height: 4vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;


}
.rightMiddle{
  margin-top: 1vh;
  border-bottom: 1px solid #fff ;
  height: 5vh;
  width: 100%;
  line-height: 5vh;
  box-shadow: 0 0 4px #ddd;
  padding-left: 1vw;

 
}
.rightBottom{

  height: 77vh;
  width: 87%;
  padding-left: 5vw;
}
.pagination{
  float: left;
  margin-left: 30vw;
  margin-top: 1vh;
}
.date{
  float: left;
}
.dateText{
  float: left;
}
.datePicker{
  float: left;
  margin-top: 3px;
}
.mobile{
  float: left;
 
}
.mobileText{
  float: left;
  margin-left: 2vw;
}
.mobileInput{
  float: left;
}
.select{
  float: left;
  margin-left: 2vw;
}


:deep(.el-pagination.is-background .btn-prev){
  background: #ffffff !important; 
  border: 1px solid #f4f4f5;
  width: 70px;
  box-shadow: 0 0 1px #ddd;
}

:deep( .el-pagination.is-background .btn-next){
   background: #ffffff !important; 
   border: 1px solid #f4f4f5;
   width: 70px;
   box-shadow: 0 0 1px #ddd;
}



:deep(.el-pagination.is-background .btn-prev, ::v-deep .el-pagination.is-background .btn-next,::v-deep .el-pagination.is-background .el-pager li){
   
     margin:0;
}
</style>
